<template>
	<m-layout barBg="unset" gap="0 24" :scrollTop="scrollTop" title="" color="#000000" scrollColor="#30c64f"
		:class="[!current?'page1':'page2']">
		<view class="ran_tabBox">
			<v-tabs :show="false" v-model="current" bgColor="#E8FEEC" height="80rpx" fontSize="32rpx" :bold="true"
				:pills="true" :tabs="tabList" field="des" :scroll="false" color="#002D54" activeColor="#ffffff"
				pillsColor="linear-gradient(270deg, #18C03B, #C2D356)" pillsBorderRadius="80rpx" :lineAnimation="false">
			</v-tabs>
		</view>
		<view class="ran_hdsm" v-if="!current">
			<view class="fs28">活动说明</view>
			<view class="fs24">1、直推有效用户（j精品礼包区最低消费599）</view>
			<view class="fs24">2、每周直推最高的前{{rewardCount}}名可获得奖励</view>
			<view class="fs24">3、每周一发放上周榜单汇总信息，公布排名数据</view>
			<view class="fs24">3、最低要求：周有效新增直推消费商数量≥{{getConfig(519)}}人</view>
			<!-- <view class="fs24">5、计算周期：从当周周一24：00到当周周日24：00</view> -->
		</view>
		<view class="ran_hdsm" v-else>
			<view class="fs28">活动说明</view>
			<view class="fs24">1、当周新增有效直推消费商业绩前{{rewardCount}}名可获得奖励</view>
			<view class="fs24">2、每周一发放上周榜单汇总信息，公布排名数据</view>
			<view class="fs24">3、最低要求：当周新增有效直推消费商业绩≥{{getConfig(516)}}</view>
			<!-- <view class="fs24">4、计算周期：从当周周一24：00到当周周日24：00</view> -->
		</view>
		<view class="ran_listBox">
			<view class="ran_listTop">
				<view class="flex flex-end" style="width: 100%;height: 100%;">
					<view class="listTop flex-column flex-end">
						<!-- <view>本周累计奖池:{{ current==0? poolInfo.zt_week_amount || 0 :poolInfo.yj_week_amount || 0 }}元
						</view> -->
						<view class="uni-list-cell-db">
							<view class="flex-end mb-12" @click="initFn()" v-if="!isWeek">查看本周</view>
							<view class="uni-input" @click="open()">
								<text> {{isWeek?'查看历史':`${dateObj.startTime.slice(5).replace('-','/')}-${dateObj.endTime.slice(5).replace('-','/')}`}}</text>
								<m-icon size="24" color="#fff" type="icon-qianjin" />
							</view>
							<!-- <picker mode="date" :value="date" :start="startDate" :end="endDate"
								@change="bindDateChange">
								<view class="uni-input">
									<text> {{isWeek?'查看历史':date}}</text>
									<m-icon size="24" color="#fff" type="icon-qianjin" />
								</view>
							</picker> -->
						</view>
					</view>
				</view>
				<view class="ran_listTopAd">
					<view class="AdtopText">
						<view :class="[isWeek?'':'fs30']">{{isWeek?'本周':dateObj.showTime}}</view>
						<view class="mt-12">{{isWeek?'当前':''}}{{ current==0?'直推':'业绩' }}排名</view>
					</view>
					<image v-if="isWeek" class="ran_jb_img" src="../../../static/images/pages/home/rankings/jinagb.png"
						mode="">
					</image>
				</view>
			</view>
			<view class="ran_list pb-36">
				<view class="ran_item flex item_title">
					<view class="flex-2">排名</view>
					<view class="flex-4">用户</view>
					<view class="flex-4 flex-end">{{isWeek?'本周':''}}有效{{ current==0?'直推人数':'直推总业绩' }}</view>
				</view>
				<template v-if="listArr.length">
					<view class="ran_itenBox" v-for="item in listArr">
						<view class="ran_item flex">
							<view class="flex-2">{{ item.topindex }}</view>
							<view class="flex-4">{{ item.username }}</view>
							<view class="flex-4 flex-end">{{ current==0?item.count:item.amount }}</view>
						</view>
					</view>
				</template>
				<template v-else>
					<m-empty />
				</template>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class="my_popup">
				<view class="my_selectDeta">选择周数
					<text class="icon iconcool guanbi-line my_selectDeta_icon" @click="iconClose"></text>
				</view>
				<!-- <view class="tabbar">
					<view :class="currentType ? 'bg' : ''" @click="currentType = true">按月选择</view>
					<view :class="!currentType ? 'bg' : ''" @click="currentType = false">按周选择</view>
				</view> -->
				<picker-view :indicator-style="indicatorStyle" :value="selectValue" class="picker-view"
					@change="bindChange">
					<picker-view-column>
						<view v-for="(item, index) in years" :key="index" class="item">{{ item }}年</view>
					</picker-view-column>
					<picker-view-column v-show="currentType">
						<view v-for="(item, index) in months" :key="index" class="item">{{ item }}月</view>
					</picker-view-column>
					<picker-view-column v-show="!currentType">
						<view v-for="(item, index) in weeks" :key="index" class="item">
							{{ `第${index + 1}周(` + item + ')' }}
						</view>
					</picker-view-column>
				</picker-view>
				<button class="my_button" type="primary" @click="close">
					确定
				</button>
			</view>
		</uni-popup>
	</m-layout>
</template>

<script>
	import dayjs from '@/utils/dayjs.js';
	import { active_0724_top_yj, active_0724_top_zt, active_0724_pool } from '@/api/active.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				pickerShow: false,
				isWeek: true, // 是否是本周
				date: currentDate,
				scrollTop: 0,
				current: 0,
				tabList: [{
						des: '周直推'
					},
					{
						des: '周业绩'
					},
				],
				poolInfo: {},
				listArr: [], // 列表
				pageSize: 10,
				pageIndex: 1,
				// picker
				dateObj: {
					startTime:currentDate,
					endTime:''
				},
				currentType: false, // 是否月选择
				indicatorStyle: 'height: 100rpx;',
				myDate: new Date(),
				year: (new Date()).getFullYear(),
				month: (new Date()).getMonth() + 1,
				selectValue: [5, 1,29],
				years: [],
				months: [],
				week: '',
				showWeek: '第1周',
				payload: {},
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			// 奖励人数
			rewardCount() {
				if (!this.current) return this.getConfig(512).split(',').length || 0
				return this.getConfig(513).split(',').length || 0
			},
			weeks() {
				const ONE_DAY = 24 * 3600 * 1000;
				let firstDay =
					new Date(this.year + '/01/01').getDay() == 0 ?
					7 :
					new Date(this.year + '/01/01').getDay();
				let weeklist = [];
				let firstweekday = '';
				let endweekday = new Date(this.year + '/12/28').getTime();
				if (firstDay > 4) {
					firstweekday =
						new Date(this.year + '/01/01').getTime() +
						(8 - firstDay) * ONE_DAY;
				} else if (firstDay <= 4) {
					firstweekday =
						new Date(this.year + '/01/01').getTime() -
						(firstDay - 1) * ONE_DAY;
				}
				for (let i = 0; i < 54; i++) {
					let numWeek = i * 7 * ONE_DAY;
					let firstday = firstweekday + numWeek;
					let endday = firstday + 6 * ONE_DAY;
					if (firstday <= endweekday) {
						weeklist.push(
							`${dayjs(firstday).format('MM/DD')}-${dayjs(endday).format(
			 				'MM/DD'
			 			)}`
						);
					}
				}
				return weeklist;
			}
		},
		watch: {
			current(val) {
				this.getData();
			},
			year(val) {
				const index = this.years.findIndex((item) => item == val);
				this.selectValue = [index, this.month - 1, 0];
			}
		},
		onLoad() {
			this.init();
				this.initPicker()
		},
		onPageScroll({ scrollTop }) {
			this.scrollTop = scrollTop;
		},
		methods: {
			bindDateChange: function(e) {
				console.log('e.detail.value', e.detail.value)
				this.date = e.detail.value
				this.isWeek = this.weekJudge(this.date, 'datetime')
				console.log('this.isWeek==>', this.isWeek)
				if (!this.isWeek) {
					this.getData()
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year;
					// year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			init() {
				this.getData();
				this.getJackpot();
			},
			// 查看本周
			async initFn() {
				this.isWeek = true;
				this.date = this.getDate({ format: true })
				this.getData();
			},
			// 获取分页数据列表
			async getData() {
				let params = {
					dn:this.dateObj.startTime,
					// dn: this.date,
					pageSize: this.pageSize,
					pageIndex: this.pageIndex,
				}
				let res = {};
				if (this.current == 0) {
					res = await active_0724_top_zt(params);
				} else if (this.current == 1) {
					res = await active_0724_top_yj(params);
				}
				const { list, pageCount } = res;
				// console.log('list===>', list)
				this.listArr = list;
			},
			// 获取本周累计奖池
			async getJackpot() {
				const res = await active_0724_pool();
				console.log(res);
				if (res.success) {
					this.poolInfo = res.data;
				}
			},
			initPicker() {
				this.week = this.weeks[0];
				for (let i = this.myDate.getFullYear() - 1; i <= this.myDate.getFullYear(); i++) {
					this.years.push(i);
				}
				for (let i = 1; i <= 12; i++) {
					this.months.push(i);
				}
			},
			bindChange(e) {
				const val = e.detail.value;
				this.year = this.years[val[0]];
				this.month = this.months[val[1]];
				this.week = this.weeks[val[2]];
				this.showWeek = '第' + (val[2] + 1) + '周';
			},
			open() {
			
				this.$refs.popup.open('bottom');
			},
			close() {
				if (this.currentType) {
					// 月
					this.month = this.month > 10 ? this.month : '0' + this.month;
					this.payload = {
						startTime: this.year + '-' + this.month + '-' + '01',
						endTime: this.year + '-' + this.month + '-' + '31',
						showTime: this.year + '-' + this.month
					};
				} else {
					// 周
					const [firstWeek, lastWeek] = this.week
						.split('-')
						.map((item) => item.replace('/', '-'));
					this.payload = {
						startTime: this.year + '-' + firstWeek,
						endTime: this.year + '-' + lastWeek,
						showTime: this.year + '-' + this.showWeek
					};
				}
				console.log('this.payload',this.payload)
				this.dateObj = this.payload;
				this.$refs.popup.close();
				this.isWeek = this.weekJudge(this.dateObj.startTime, 'datetime')
				console.log('this.isWeek==>', this.isWeek)
				if (!this.isWeek) {
					this.getData()
				}
			},
			iconClose() {
				this.$refs.popup.close();
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #caf1d2;
	}

	.page1 {
		background: url('../../../static/images/pages/home/rankings/pk_layout_pg1.png') no-repeat;
		background-size: 100% 900rpx;
	}

	.page2 {
		background: url('../../../static/images/pages/home/rankings/pk_layout_pg2.png') no-repeat;
		background-size: 100% 900rpx;
	}

	.ran_tabBox {
		box-sizing: border-box;
		background: linear-gradient(270deg, #88D899, #E4FFE9);
		border: 0px solid #000000;
		box-shadow: 0px 0px 0px 0px #FFFFFF;
		border-radius: 80rpx;
		padding: 10rpx;

		::v-deep {
			.v-tabs {
				border-radius: 80rpx;
			}
		}
	}

	.ran_hdsm {
		font-family: PingFang SC;
		font-weight: 600;
		color: #333;
		margin-top: 380rpx;
		// text-stroke: 1rpx #000000;
		// -webkit-text-stroke: 1rpx #000000;
	}

	.ran_listBox {
		background: #fff;
		border-radius: 30rpx;
	}

	.ran_listTop {
		position: relative;
		border-top-right-radius: 30rpx;
		background: url('../../../static/images/pages/home/rankings/listbj.png') no-repeat;
		background-size: 100% 150rpx;
		background-color: #fff;
		height: 150rpx;
		margin-top: 80rpx;

		.listTop {
			position: relative;
			z-index: 20;
			margin-right: 29rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.ran_listTopAd {
		position: absolute;
		top: -35rpx;
		left: -3rpx;
		width: 100%;
		background: url('../../../static/images/pages/home/rankings/listdw.png') no-repeat;
		background-size: 100% 300rpx;
		height: 300rpx;
		z-index: 10;

		.AdtopText {
			position: relative;
			margin-top: 46rpx;
			margin-left: 45rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000;
			// text-stroke: 0.5rpx #fff;
			// -webkit-text-stroke: 0.5rpx #fff;
			z-index: 15;
		}

		.ran_jb_img {
			position: absolute;
			top: 25rpx;
			left: 100rpx;
			width: 90rpx;
			height: 90rpx;
			z-index: 10;
		}
	}

	.ran_list {
		padding: 80rpx 25rpx 0rpx 25rpx;

		.ran_itenBox {
			padding: 30rpx 0rpx;
			border-bottom: 1rpx solid #eee;
		}

		.ran_item {
			padding: 0rpx 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.item_title {
			font-weight: bold;
		}
	}

	.ran_bottom {
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-top: 26rpx;
	}
	// 日期选择
	.my_popup {
		height: 1000rpx;
		border-radius: 8rpx 8rpx 0 0;
		position: relative;
		font-size: 36rpx;
		font-weight: 500;
		color: #1b1d21;
	
		.my_selectDeta {
			height: 104rpx;
			line-height: 104rpx;
			text-align: center;
			position: relative;
	
			.my_selectDeta_icon {
				position: absolute;
				right: 24rpx;
				top: 0;
			}
		}
	
		.my_button {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: 24rpx 36rpx;
		}
	
		.picker-view {
			width: 750rpx;
			height: 600rpx;
			margin-top: 20rpx;
	
			.item {
				line-height: 100rpx;
				text-align: center;
			}
		}
	
		.tabbar {
			box-sizing: border-box;
			width: 328rpx;
			padding: 8rpx;
			height: 72rpx;
			margin: 0 auto;
			display: flex;
			border-radius: 8rpx;
			background-color: #f4f5f7;
			justify-content: space-around;
	
			view {
				padding: 5rpx 12rpx;
				font-size: 30rpx;
				color: #1b1d21;
				background: #f4f5f7;
			}
	
			.bg {
				background: rgb(1, 1, 202);
				border-radius: 8rpx;
				color: white;
			}
		}
	}
</style>